import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { Layout, Table, Input, Button, InputNumber, Popconfirm } from 'antd';

import CreateConnection from './components/createConnection';
import EditConnection from './components/editConnetion';
import '../style.scss';

const { Content } = Layout;
const { Column } = Table;

@withRouter
class TableManagement extends Component{
  state={
    page: 10,
    searchValue: '',
  };

  changePage = (value) => {
    this.setState({page:value});
  }
  
  setSearchValue = (e) => {
    this.setState({searchValue: e.target.value})
  }

  handleSearch = () => {
    let userName = "admin";//待修改
    this.props.searchDataSource(userName,this.state.searchValue)
  }

  resetSearch = () => {
    this.setState({searchValue:''});
    let userName = "admin";//待修改
    this.props.getDataSource(userName);
  }
 
  deleteCon = (record) => {
    let databaseConfig = JSON.parse(record.userDatabaseConfig);
    let params = {databaseId: databaseConfig.databaseId,id: databaseConfig.id};
    this.props.deleteCon(record.databaseType,params);
  }

  componentDidMount(){
    let userName = "admin";//待修改
    this.props.getDataSource(userName);
  };

  handleEditClick = (id,dataType) => {
    this.edit.handleClick(id,dataType);
  }

  render(){
    const { page } = this.state;
    return (
      <Content style={{marginTop:12}}>
        <div>
          <div style={{display: 'inline-block', fontWeight: 'bold'}}>数据源库表列表</div>
          <div style={{float: 'right', display: 'inline-block', height:'100%'}}>
            <span>关键字: <Input placeholder="请输入关键字" style={{width: 200}} onChange={this.setSearchValue} value={this.state.searchValue}/></span>
            <Button type="primary" style={{marginLeft: 12}} onClick={this.handleSearch}>搜索</Button>
            <Button type="primary" style={{marginLeft: 12}} onClick={this.resetSearch}>重置</Button>
            <CreateConnection searchValue={this.state.searchValue}/>
          </div>
        </div>
        <div className="table-box" style={{marginTop:24}}>
          <Table 
          pagination={{pageSize:page,showSizeChanger:false}}
          dataSource={this.props.dataSource}>
            <Column title="序号" render={(text, record, index)=><span>{index+1}</span>}/>
            <Column title="数据源名称" dataIndex="configName" key="configName"/>
            <Column title="数据库类型" dataIndex="databaseType" key="databaseType"/>
            <Column title="IP地址" dataIndex="hostName" key="hostName"/>
            <Column title="端口" dataIndex="port" key="port"/>
            {/* <Column title="用户名" dataIndex="username" key="username"/>
            <Column title="归属部门" dataIndex="" key=""/> */}
            <Column title="备注" render={(text, record, index)=><span>{JSON.parse(record.userDatabaseConfig).description}</span>}/>
            {/* <Column title="创建时间" dataIndex="" key=""/> */}
            <Column title="操作" dataIndex="operation" key="operation"
            render={(text,record)=>(
              <span>
                <span className="action" onClick={e=>{e.stopPropagation();this.handleEditClick(JSON.parse(record.userDatabaseConfig).id,record.databaseType);}}>编辑</span>
                <EditConnection onRef={ref=>this.edit=ref} searchValue={this.state.searchValue} />
                <Popconfirm
                title="确认删除?"
                onConfirm={() => this.deleteCon(record)}
                >
                  <span className="action">删除</span>
                </Popconfirm>
                <span>
                  <Link to={'/dataSource/table/tableList/'+record.databaseType+'/'+(record.databaseName?record.databaseName:"hbase")+"/"+JSON.parse(record.userDatabaseConfig).databaseId}>
                    库表管理
                  </Link>
                </span>
              </span>)}/>
          </Table>
          <div className={this.props.dataSource.length>0?'footer':'withoutPagination'}>
            显示<InputNumber min={1} defaultValue={page} onChange={this.changePage}/>项结果，共{this.props.dataSource.length}项
          </div>
        </div>
      </Content>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    dataSource: state.getIn(['connection','dataSource']).toJS(),
  }
}

const mapDispatchToProps = (dispatch) => ({
  getCon(dataType,params){
    dispatch(actionCreators.getConOperation(dataType,params));
  },
  getDataSource(userName){
    dispatch(actionCreators.getDataSourceOperation(userName));
  },
  deleteCon(dataType,params){
    dispatch(actionCreators.deleteConOperation(dataType,params));
  },
  searchDataSource(userName,searchValue){
    dispatch(actionCreators.searchDataSourceOperation(userName,searchValue));
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(TableManagement);